<template>
  <div class="myTeam page" ref="webview">
    <van-nav-bar title="我的团队" class="bg_white" left-arrow @click-left="$router.push({'path': '/my'})" />
    <!-- <van-search v-model="memberNo" show-action :class="{'focus': isFocus}" placeholder="Search" @focus="isFocus=true" @blur="isFocus=false" @search="onSearch">
      <div slot="action" class="search-btn" @click="onSearch">搜索</div>
    </van-search> -->
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="earnings">
          <div class="rows-flex">
            <div class="rows">
              <div class="wp">
                <div class="amount">{{userInfo.firstNum}}</div>
                <div class="size-text">邀请人数</div>
              </div>
            </div>
            <div class="rows">
              <div class="wp">
                <div class="amount">{{userInfo.orderGoodsAmount}}</div>
                <div class="size-text">团队单数</div>
              </div>
            </div>
          </div>
        </div>
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">
          <span>暂无数据</span>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>24?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <div class="table-box">
            <table class="table" style="border: 1px solid #007aff;">
              <tr>
                <th width="40" style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">序号</th>
                <th width="100" style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">编号</th>
                <th width="100" style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">昵称</th>
                <th width="100" style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">第一团队销售量</th>
                <th width="100" style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">团队单数</th>
              </tr>
              <template v-for="(item,index) in dataList">
                <tr :key="index">
                  <td style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">0{{index+1}}</td>
                  <td style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">{{item.member_no}}</td>
                  <td style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">{{item.nickname}}</td>
                  <td style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">{{item.order_num}}</td>
                  <td style="border-bottom: 1px solid #007aff; border-right: 1px solid #007aff;">{{item.team_amount}}</td>
                </tr>
              </template>
            </table>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div class="submiBtn">
      <van-button class="btn" round :loading="isLoading " @click.native="$router.push({'path': '/my/register'})">注册新会员</van-button>
    </div> -->
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import mixins from '@/utils/mixins';
import { setTimeout } from 'timers';
export default {
  name: 'myTeam',
  mixins: [mixins],
  data () {
    return {
      searchValue: '',
      isFocus: false,
      isLoading: false,
      memberNo: '',
      apiType: 'user',
      apiUrl: 'myTeam'
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.limit = 26;
    this.getList('myTeam', true);
  },
  methods: {
    onSearch () {
      this.params.memberNo = this.memberNo;
      this.getList('myTeam', true);
    },
    // 删除会员
    delMember (item) {
      if (item.status) {
        this.$toast('当前会员已激活不能删除!');
        return;
      }
      this.$dialog.confirm({
        title: '温馨提醒',
        message: '你确定要删除会员吗',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            setTimeout(done, 1000);
            this.$API.user.memDel({ id: item.id }).then(res => {
              if (!res.code) {
                setTimeout(() => {
                  done();
                  this.$toast('删除成功');
                  this.getList('myTeam', true);
                }, 1000);
              } else {
                this.$toast(res.message);
              }
            });
          } else {
            done();
          }
        }
      });
    },
    // 激活会员
    activeMember (item) {
      this.$toast.loading({ duration: 0 });
      this.$API.user.activeMember({ id: item.id }).then(res => {
        if (!res.code) {
          this.getList('myTeam', true);
          setTimeout(() => {
            this.$toast('激活成功');
          }, 400);
        } else {
          setTimeout(() => {
            this.$toast(res.message);
          }, 400);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.myTeam {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .submiBtn {
    margin: 20px 30px;
    .btn {
      background-color: #fff;
      width: 100%;
      height: 100px;
      line-height: 100px;
      border: none;
      .van-button__text {
        color: #125dff;
        font-size: 34px;
      }
    }
  }
  .table-box {
    margin: 0 20px;
    overflow: auto;
  }
  .table {
    width: 1200px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin-top: 10px;
    td {
      border: 1px solid #007aff;
      text-align: center;
      padding: 10px 15px;
      font-size: 24px;
      .c1 {
        color: #125dff;
      }

      .activation {
        color: #125dff;
        text-align: center;
        margin-right: 10px;
      }
      .del {
        color: red;
      }
    }
    th {
      padding: 15px 0;
      color: #007aff;
      font-size: 24px;
    }
    .activation {
      color: #007aff;
    }
  }
  .earnings {
    padding: 10px 20px 20px;
    .rows-flex {
      display: flex;
      flex-wrap: wrap;
      .rows {
        width: 50%;
        .wp {
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0px 4px 8px rgba(88, 89, 90, 0.14);
          border-radius: 8px;
          // box-shadow: -1px 2px 15px #d4d4d5;
          margin: 10px;
          .name {
            font-size: 30px;
            color: #312e2e;
          }
          .icon {
            width: 32px;
            height: 32px;
            margin-right: 3px;
            vertical-align: middle;
            position: relative;
            top: -4px;
          }
          .size-text {
            font-size: 24px;
            color: #999999;
            // display: flex;
            align-items: center;
            padding-top: 4px;
            text-align: center;
          }
          .amount {
            font-size: 44px;
            color: #312e2e;
            line-height: 32px;
            position: relative;
            padding: 20px 0;
            font-family: 'Nirmala';
            font-weight: bold;
            text-align: center;
          }
          .text {
            color: #545454;
          }
          .c1 {
            color: #7c67ff;
          }
        }
      }
    }
  }
  .content {
    flex: 1;
    background-color: #f5f5f5;
    position: relative;
    overflow-y: auto;
  }
  .search-btn {
    padding: 0 20px;
    display: block;
    color: #007aff;
  }
}
</style>
